<template>
	<view class="d-flex border-top" style="height: 100%;box-sizing: border-box;">
		<scroll-view scroll-y="true" style="flex:1" class="border-right border-light-secondary" :scroll-top="scroleft">
			<view class="border-bottom border-light-secondary scroll-left" v-for="(item,i) in navbar" :key="i" :class="nindex==i?'class-act bg-light-secondary':''"
			 @click="changindex(i)">
				<view class=" py-1 font-md text-muted text-center">
					{{item.name}}
				</view>
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" style="flex: 3.5;height: 100%;" :scroll-top="scrollr" :scroll-with-animation="true"
		 @scroll="scro">
			<view class="row scroll-right" v-for="(item,i) in navbar" :key="i">
				<view class="span24-8 text-center py-2" v-for="(its,index) in item.list" :key="index">
					<image :src="its.src" style="height: 120rpx; width: 120rpx;"></image>
					<text class="d-block">{{its.name}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.init()
		},
		onReady() {

			let left = []
			let right = []
			const query = uni.createSelectorQuery().in(this);
			query.selectAll('.scroll-left').boundingClientRect(data => {
				left = data.map((item, i, arr) => {
					return (item.top);
				})
			}).exec();
			query.selectAll('.scroll-right').boundingClientRect(data => {
				this.elInfo = data
				right = data.map((item, i, arr) => {
					// console.log(item)
					return (item.bottom);

				})
			}).exec();
			this.left = left
			this.right = right

		},
		data() {
			return {
				isload: true,
				elInfo: [],
				nindex: 0,
				left: [],
				right: [],
				list: [],
				navbar: [],
				scrollr: 0,
				scroleft: 0
			}
		},
		methods: {
			scro(e) {
				var ids = 0
				for (var i = this.right.length - 1; i >= 0; i--) {
					if (e.detail.scrollTop <= this.right[i]) {
						ids = i;
					}
				}
				this.nindex = ids
				if (ids % 4 > 0 && ids > 4) {
					this.scroleft = this.left[ids - 3];
				}
				// this.changindex(ids)
			},
			changindex(index) {
				if (this.nindex == index) return;
				this.nindex = index
				this.scrollr = this.right[index] - 1;
				// console.log(this.scrollr)
			},
			init() {
				for (var i = 0; i < 20; i++) {
					let obj = {
						name: "分类" + i
					}
					let list = []
					for (var j = 0; j < 20; j++) {
						let its = {
							src: "/static/logo.png",
							name: i + "-商品·" + j
						}
						list.push(its)
					}
					obj.list = list
					this.navbar.push(obj)
				}
				console.log(this.navbar)
				this.isload = false
			}
		}
	}
</script>

<style>
	.class-act {
		border-left: 8rpx solid #FD6801;
		color: #FD6801 !important;
	}
</style>
